<template>
	<view>
		<u-navbar title-color="#ffffff" back-icon-color="#ffffff" :border-bottom="false" :is-fixed="true" :is-back="false" :background="background">
			<view class="flex align-center flex-1">
				<scroll-view scroll-x scroll-into-view="tab1" scroll-with-animation class="scroll-row" style="height: 92rpx;">
					<view class="flex justify-center">
						<view id="tab0" class="scroll-row-item px-1 py-2 font-md" :class="tabIndex === 0?'text-main font-weight-bold':''"
						 @click="changeTab(0)">
							最新
						</view>
						<view id="tab1" class="scroll-row-item px-1 py-2 font-md" :class="tabIndex === 1?'text-main font-weight-bold':''"
						 @click="changeTab(1)">
							关注
						</view>
					</view>
				</scroll-view>
			</view>
		</u-navbar>
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" 
				 :refresher-enabled="true" 
				 :refresher-triggered="triggered"
				 :refresher-threshold="250" 
				 @scrolltolower="addTjData" 
				 @refresherrefresh="onRefresh" 
				 refresher-default-style="black">
					<u-waterfall v-model="flowList" ref="uWaterfall">
						<template v-slot:left="{leftList}">
							<w-pbl-img-l :leftList="leftList"></w-pbl-img-l>
						</template>
						<template v-slot:right="{rightList}">
							<w-pbl-img-r :rightList="rightList"></w-pbl-img-r>
						</template>
					</u-waterfall>
					<u-loadmore margin-top="30" margin-bottom="30" font-size="30" color="#000000" icon-type="flower" :status="loadStatusTj"></u-loadmore>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="addGzData">
					<w-img-card :gzList="gzList"></w-img-card>
					<u-loadmore margin-top="30" margin-bottom="30" font-size="30" color="#000000" icon-type="flower" :status="loadStatusGz"></u-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import wPblImgL from '@/components/wboot/w-pbl-img-l.vue';
	import wPblImgR from '@/components/wboot/w-pbl-img-r.vue';
	import wImgCard from '@/components/wboot/w-img-card-swiper.vue';
	import pblJson from '@/common/data/pul.js';
	import gzList from '@/common/data/gz.js';
	export default {
		components: {
			wPblImgL,
			wPblImgR,
			wImgCard
		},
		data() {
			return {
				loadStatusTj: 'loadmore',
				loadStatusGz: 'loadmore',
				show: false,
				_freshing: false,
				triggered: false,
				scrollH: 500,
				tabIndex: 0,
				background: {
					background: '#ffffff'
				},
				flowList: [],
				gzList: gzList.data,
				list: pblJson.data
			}
		},
		onLoad() {
			this.addTjData();
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
		},
		methods: {
			addTjData() {
				this.loadStatusTj = 'loading';
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						let index = this.$u.random(0, this.list.length - 1);
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = JSON.parse(JSON.stringify(this.list[index]))
						item.id = this.$u.guid();
						this.flowList.push(item);
					}
					this.loadStatusTj = 'loadmore';
				}, 1000)

			},
			addGzData(){
				this.loadStatusGz = 'loading';
				setTimeout(() => {
					let arr = [];
					for (let i = 0; i < 10; i++) {
						let index = this.$u.random(0, gzList.data.length - 1);
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = JSON.parse(JSON.stringify(gzList.data[index]))
						item.id = this.$u.guid();
						arr.push(item);
					}
					this.gzList = [...this.gzList,...arr]
					this.loadStatusGz = 'loadmore';
				}, 1000)
			},
			onRefresh() {
				if (this._freshing) {
					return;
				}
				this._freshing = true;
				this.triggered = true;
				setTimeout(() => {
					this.$refs.uWaterfall.clear();
				}, 1000)
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					this.flowList = [];
					for (let i = 0; i < 10; i++) {
						let index = this.$u.random(0, this.list.length - 1);
						let item = JSON.parse(JSON.stringify(this.list[index]))
						item.id = this.$u.guid();
						this.flowList.push(item);
					}
				}, 1100)
			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				this.scrollInto = 'tab' + index
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
